npm install --save classlist.js<template>
	<div class="big1_box">
		<input type="text" placeholder="请输入你要搜索内容"/>
		<!-- 轮播框 -->
		<div>
			<div class="lunbokbackgroung">
				<div class="showImg">
				    <!-- 轮播图片 -->
				    <img  @mouseover="changeInterval(true)" 
				         @mouseleave="changeInterval(false)"  
				         v-for="(item,index) in imgArr" 
				         :key="item.id"
				         :src="item.url" 
				         alt="暂无图片" 
				         v-show="item.id===currentIndex" 
				         >
				    <!-- 控制圆点 -->
				    <div class="banner-circle">
				        <ul>
				            <li @click="changeImg(item.id)" 
				                v-for="(item) in imgArr" 
				                :key="item.id"
				                :class="item.id===currentIndex? 'active': '' "
				             ></li>
				        </ul>
				    </div>
				</div>
			</div>
		</div>
		
		
		<!-- 自营品牌、小时快速退款、 无忧退货-->
		<div class="service">
		  <ul class="small_box">
		    <li><div class="icon_ok"><div class="box1">√</div><span>自营品牌</span></div></li>
		    <li><div class="icon_ok"><div class="box1">√</div><span>无忧退货</span></div></li>
		    <li><div class="icon_ok"><div class="box1">√</div><span>极速退款</span></div></li>
		  </ul>
		</div>
		
		<!-- 商品推荐 -->
		<div class="recommend_bigbox">
			<div class="recommend_box" v-for="(item,index) in shopitem" @click="jumpdelite(item)">
				<img class="recommend_img" :src="item.imgs[0]"/>
				<div>{{item.shopname}}</div>
			</div>
		</div>
		
		<div class="kong"></div>
	</div>
</template>
<script>
	import { mapState } from 'vuex'
	export default {
	  name: 'shouyepage',
	  data(){
	  			return {
	  				currentIndex :0,//当前所在图片下标
	  				timer:null,//定时轮询
					imgArr:[
						{	id:0,
							url:"/imgs/lbk/1.jpg",
						},{
							id:1,
							url:"/imgs/lbk/2.jpg",
						},{
							id:2,
							url:"/imgs/lbk/3.jpg",
						}
					],
					
	  			}
	  		},
			computed:{
				//调用vuex从后台获取的数据
				...mapState({
					shopitem:state=>state.shopitem.shopitem,
				})
			},
	  		methods:{
	  			//开启定时器
	  			startInterval(){
	  				// 事件里定时器应该先清除在设置，防止多次点击直接生成多个定时器
	  				clearInterval(this.timer);
	  				this.timer = setInterval(()=>{
	  					this.currentIndex++;
	  					if(this.currentIndex > this.imgArr.length-1){
	  						this.currentIndex = 0
	  					}
	  				},3000)
	  			},
	  			// 点击左右箭头
	  			clickIcon(val){
	  				if(val==='down'){
	  					this.currentIndex++;
	  					if(this.currentIndex===this.imgArr.length){
	  						this.currentIndex = 0;
	  					}
	  				}else{
	  					/* 第一种写法
	  					this.currentIndex--;
	  					if(this.currentIndex < 0){
	  						this.currentIndex = this.imgArr.length-1;
	  					} */
	  					// 第二种写法
	  					if(this.currentIndex === 0){
	  						this.currentIndex = this.imgArr.length;
	  					}
	  					this.currentIndex--;
	  				}
	  			},
	  			// 点击控制圆点
	  			changeImg(index){
	  				this.currentIndex = index
	  			},
	  			//鼠标移入移出控制
	  			changeInterval(val){
	  				if(val){
	  					clearInterval(this.timer)
	  				}else{
	  					this.startInterval()
	  				}
	  			},
		jumpdelite(item){
			this.$router.push({
				name: "detali",
				params: {
					id:item.id,
					shopname:item.shopname,
					price:item.price,
					type:item.type,
					imgs:item.imgs,
					specification:item.specification,
					isbool:item.isbool,
					},
			})
		}
	  		},
	  		//进入页面后启动定时轮询
	  		mounted(){
	  			this.startInterval()
	  		},

	  	}
</script>

<style scoped>
	.big1_box{
		width: 100%;
		overflow-x: hidden;
	}
	.kong{
		height: 3.4rem;
	}
input{
	width: 97%;
	border-radius: 0.8rem;
}
.lunbokbackgroung{
	margin-top: 1rem;
	background-color: whitesmoke;
	width: 90%;
	margin-left: 1rem;
}
li {
	list-style-type: none;
}
.showImg{
	position: relative;
	width: 20rem;
	height: 12.5rem;
	margin: auto;
	overflow: hidden;
}
/* 轮播图片 */
.showImg img{
	width: 100%;
	height: 100%;
}
/* 控制圆点 */
.banner-circle{
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 1.25rem;
}
.banner-circle ul{
	margin: auto;
	height: 100%;
	text-align: right;
	margin-right: 2rem;
}
.banner-circle ul li{
	display: inline-block;
	width: 0.5rem;
	height: 0.5rem;
	margin: 0 auto;
	border-radius: 7px;
	background-color: rgba(125,125,125,.8);
	cursor: pointer;
}
.active{
	background-color: black !important; 
}
.small_box{
	width: 90%;
	margin: auto;
	height: 3rem;
	display: flex;
	flex-direction: row;
}
.small_box li{
	flex:1;
}
.icon_ok{
	display: flex;
	flex-direction: row;
	font-size: 0.5rem;
	line-height: 1.4rem;
	margin-left: 0rem;
	margin-right: 2rem;
}
.box1{
	width:1.4rem;
	height:1.4rem;
	border-radius: 50%;
	text-align: center;
	line-height: 1.4rem;
	color: firebrick;
	margin-right: 0.2rem;
	border: 0.0625rem solid firebrick;
}
.recommend_bigbox{
	flex-wrap: wrap;
	display: flex;
	flex-direction: row;
	margin-left: 1.875rem;
}
.recommend_box{
	border: 0.125rem solid whitesmoke;
	width: 45%;
}
.recommend_img{
	margin-top: 1.125rem;
	width: 7.5rem;
	height: 7.5rem;
}
</style>